<template>
  <div class="editSp">
    <div class="box" @click="$event.stopPropagation()">
      <div class="tit">
        <span>编辑商品</span>
      </div>
      <div class="inp">
        <el-form ref="modelRef" :model="modelTable" :rules="rules" status-icon>
          <el-form-item prop="goods_name" label="商品名称">
            <el-input
              v-model="modelTable.goods_name"
              placeholder="商品名称"
              size="default"
              maxlength="50"
              style="width: 440px; height: 80px"
              show-word-limit
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item prop="goods_number" label="商品数量">
            <el-input v-model="modelTable.goods_number" placeholder="商品数量"></el-input>
          </el-form-item>
          <el-form-item prop="goods_price" label="商品价格">
            <el-input v-model="modelTable.goods_price" placeholder="商品价格"></el-input>
          </el-form-item>
          <el-form-item prop="goods_state" label="热销品数量">
            <el-input v-model="modelTable.goods_state" placeholder="热销品数量"></el-input>
          </el-form-item>
          <el-form-item prop="is_promote" label="热销品">
            <el-switch v-model="modelTable.is_promote" />
          </el-form-item>
          <el-form-item prop="upd_time" label="更新时间">
            <el-input v-model="modelTable.upd_time" placeholder="更新时间"></el-input>
          </el-form-item>
          <el-form-item prop="goods_id" label="商品id">
            <el-input v-model="modelTable.goods_id" placeholder="商品id"></el-input>
          </el-form-item>
          <el-form-item prop="add_time" label="添加时间">
            <el-input v-model="modelTable.add_time" placeholder="添加时间"></el-input>
          </el-form-item>
          <el-form-item prop="goods_weight" label="商品重量">
            <el-input v-model="modelTable.goods_weight" placeholder="商品重量"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="but">
        <el-button>取消</el-button>
        <el-button type="primary" @click="ensure">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { editSp } from '@/api/editSp'
import { useCounterStoreB } from '@/stores/temporary'
const storeB = useCounterStoreB()
interface IModelTable {
  goods_name: string
  goods_number: number
  goods_price: number
  goods_state: number
  goods_weight: number
  hot_mumber: number
  is_promote: boolean
  upd_time: number
  goods_id: number
  add_time: number
  cat_one_id: number
}
const modelTable = ref(storeB.jurisdictionObj) as Ref<IModelTable>

const rules = ref({})

const ensure = async () => {
  try {
    await editSp({
      id: modelTable.value.goods_id,
      goods_name: modelTable.value.goods_name,
      goods_price: modelTable.value.goods_price,
      goods_number: modelTable.value.goods_number,
      goods_weight: modelTable.value.goods_weight,
    })
  } catch (err) {
    console.log(err)
  }
}
watch(
  () => storeB.jurisdictionObj,
  (newVal) => {
    const defaultValues: IModelTable = {
      goods_name: '',
      goods_number: 0,
      goods_price: 0,
      goods_state: 0,
      goods_weight: 0,
      hot_mumber: 0,
      is_promote: false,
      upd_time: 0,
      goods_id: 0,
      add_time: 0,
      cat_one_id: 1,
    }
    modelTable.value = { ...defaultValues, ...newVal }
  },
)
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
  background: #fff;
  padding: 20px;
}
</style>
